<template>
  <div>
    <div p-5>
      <a-tabs class="all-tabs" v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="任务信息">
          <TaskInfo :id="route.query.id"></TaskInfo>
          <div class="taskInfo-body-box">
            <div class="taskInfo-body-box-tittle">
              <div class="taskInfo-body-box-tittle-left"></div>
              <div class="taskInfo-body-box-tittle-right">相关文书</div>
            </div>
            <div class="taskInfo-body-box-nodeStatus">
              <a-row :gutter="24">
                <a-col class="gutter-row" :span="8">
                  <BookCreate
                    :type="5"
                    :id="id"
                    :disabled="taskData?.nowCorrectFileUrl != ''"
                    :url="taskData?.orderCorrectFileUrl"
                    :isShow="false"
                    @getBookUrl="getBookUrl"
                  />
                </a-col>
              </a-row>
              <a-row :gutter="24" v-if="isCheck == '3' || (isCheck == '1' && songda)">
                <a-col class="gutter-row" :span="8">
                  <BookCreate
                    :type="23"
                    :id="id"
                    :isShow="isCheck == '3'"
                    :url="songda"
                    :newFileUrl="songda"
                    @getBookUrl="getBookUrl"
                  />
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="taskInfo-body-box" v-if="isCheck == '2'">
            <div class="taskInfo-body-box-tittle">
              <div class="taskInfo-body-box-tittle-left"></div>
              <div class="taskInfo-body-box-tittle-right">审批信息</div>
            </div>
            <div class="taskInfo-body-box-infos">
              <a-form
                ref="formRef"
                :model="formState"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
              >
                <a-row :gutter="24">
                  <a-col class="gutter-row" :span="8">
                    <a-form-item label="处理方式" name="nodeStatus">
                      <a-radio-group v-model:value="formState.nodeStatus">
                        <a-radio :value="'2'">同意</a-radio>
                        <a-radio :value="'3'">不同意</a-radio>
                      </a-radio-group>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row :gutter="24">
                  <a-col class="gutter-row" :span="8">
                    <a-form-item label="审批意见" name="approveOpinions">
                      <a-textarea
                        v-model:value="formState.approveOpinions"
                        placeholder="请填写审批意见"
                        :auto-size="{ minRows: 2, maxRows: 5 }"
                        :maxlength="128"
                        showCount
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="任务审批记录" force-render>
          <DynamicTable
            :columns="columns"
            :data-request="loadData"
            bordered
            :search="false"
            :showToolBar="false"
            :pagination="false"
          />
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="bottomBox"></div>
    <div class="bottomBtns" style="z-index: 3">
      <a-space :size="12">
        <a-button size="large" @click="cacel">取消</a-button>
        <a-button v-if="isCheck == '2'" size="large" type="primary" @click="onSubmit(1)"
          >提交</a-button
        >
        <a-button size="large" type="primary" v-if="handleShowFlag == 1" @click="taskCreate"
          >任务处理</a-button
        >
        <a-button v-if="isCheck == '3'" size="large" type="primary" @click="handleSub()"
          >提交</a-button
        >
      </a-space>
    </div>

    <a-modal title="提示" centered v-model:open="visible" :width="400" @ok="handleOk">
      确定结束任务？
    </a-modal>
  </div>
</template>
<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import TaskInfo from './components/taskInfo.vue';
  import BookCreate from '@/components/basic/book-create/index.vue';
  import router from '@/router';
  import { onMounted, reactive, ref } from 'vue';
  import { processTasks, getApproveRecord } from '@/api/supervision/taskApproval';
  import { useTable } from '@/components/core/dynamic-table';
  import { taskxfInfo } from '@/api/supervision/create-task';
  import { message } from 'ant-design-vue';
  import { useTabsViewStore } from '@/store/modules/tabsView';
  import { getInfo } from '@/api/account';
  import { uploadFireFile } from '@/api/account';
  const [DynamicTable, dynamicTableInstance] = useTable();

  const activeKey = ref('1');
  const tabsViewStore = useTabsViewStore();
  const route = useRoute();
  const cacel = () => {
    router.back();
  };
  const open = ref(false);

  const id = route.query.id as string;
  const progressId = route.query.progressId as string;
  const isCheck = route.query.isCheck as string;
  const handleShowFlag = route.query.handleShowFlag as any;
  const taskStatus = route.query.taskStatus as any;

  const songda = ref('');
  const getBookUrl = (data) => {
    if (data.code == 0) {
      taskxfInfoApi();
    }
  };
  const userName = ref();

  const onSubmit = async (val) => {
    let params = {
      id: progressId,
      caseId: id,
      nodeStatus: formState.nodeStatus,
      approveOpinions: formState.approveOpinions,
    };

    // 监督检查 提交
    formRef.value
      .validate()
      .then(async () => {
        const res = await processTasks(params);
        if (res.code == 0) {
          message.success('提交成功！');
          tabsViewStore.closeCurrentTabToUrl(route, '/supervision/supervision/taskApproval');

          // 原逻辑
        }
      })
      .catch((error) => {
        console.log('error', error);
      });
  };

  const handleSub = async () => {
    if (taskData.value.fileInfoList == '' || taskData.value.fileInfoList[0].newFileUrl == '') {
      return message.error('送达回证未上传');
    }
    visible.value = true;
  };

  const formRef = ref();
  const labelCol = {
    span: 4,
  };
  const wrapperCol = {
    span: 20,
  };
  const formState = reactive({
    nodeStatus: '2', //审批结果  同意/不同意
    approveOpinions: '', //审批意见 0 简易程序  1 一般程序
  });

  const rules = {
    nodeStatus: [
      {
        required: true,
        message: '请选择审批结果',
        trigger: 'change',
      },
    ],
  } as any;

  const taskData = ref();
  const taskxfInfoApi = async () => {
    const data = await taskxfInfo(route.query.id);
    taskData.value = data;
    if (data.fileInfoList.length) {
      songda.value = data.fileInfoList[0].newFileUrl;
    } else {
      songda.value = '';
    }

    formState.nodeStatus = taskData.value.nodeStatus;
    formState.approveOpinions = taskData.value.approveOpinions;
  };

  const loadData = async (params): Promise<API.TableListResult> => {
    const data = await getApproveRecord(route.query.id);
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };

  const visible = ref(false);
  // 任务结束 ( 其他 , 只选择受案登记 , 只选择当场处罚)
  const handleOk = async () => {
    let params = {
      id: id,
      type: 0,
    };
    uploadFireFile(params).then((res) => {
      if (res.code == 0) {
        message.success('提交成功！');
        visible.value = false;
        tabsViewStore.closeCurrentTabToUrl(route, '/supervision/supervision/task-management');
      }
    });
  };

  const columns = [
    {
      title: '节点名称',
      dataIndex: 'flowNodeName',
      hideInSearch: true,
    },
    {
      title: '审批人',
      dataIndex: 'approveName',
      hideInSearch: true,
    },
    {
      title: '审批时间',
      dataIndex: 'approveTime',
      hideInSearch: true,
    },
    {
      title: '审批结果',
      dataIndex: 'nodeStatus',
      hideInSearch: true,
      customRender: ({ record }) => caseNodeStatus(record.nodeStatus),
    },
    {
      title: '审批意见',
      dataIndex: 'approveOpinions',
      hideInSearch: true,
    },
  ];

  const caseNodeStatus = (val) => {
    switch (val) {
      case 1:
        // return '待审批';
        return '-';
      case 2:
        return '同意';
      case 3:
        return '不同意';
      default:
        return '-';
    }
  };

  const taskCreate = () => {
    if (taskStatus && taskStatus == 4) {
      // 处理
      router.push({
        path: '/supervision/handleTask',
        query: { id: id },
      });
    } else {
      // 待回证
      router.push({
        path: '/supervision/taskApproval',
        query: { id, progressId, isCheck: '3' },
      });
    }
  };

  onMounted(async () => {
    if (route.query.id) {
      taskxfInfoApi();
    }

    const userData = await getInfo();
    userName.value = userData.userName;
  });
</script>
<style lang="less" scoped>
  .taskInfo {
    &-body {
      &-box {
        margin-bottom: 16px;

        &-tittle {
          display: flex;
          align-items: center;
          padding: 13px 0;

          &-left {
            height: 14px;
            margin-right: 7px;
            border: 1px solid #0f53ac;
            border-radius: 4px;
          }

          &-right {
            color: rgb(68 68 68 / 100%);
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
          }
        }
      }
    }
  }
</style>
